<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我是读者 - 腾讯动漫</title>
    <link rel="stylesheet" href="/css/person/fontawesome/css/font-awesome.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body {
    }
a{
    text-decoration: none;
}
    .bgImage {
        width: 1600px;
        margin: 50px auto 0px;
    }

    .header {
        position: fixed;
        width: 100vw;
        height: 56px;
        background-color: #fff;
        top: 0;
    }

    .nav {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 106px;
        left: 105px;
    }

    .container {
        width: 1200px;
        height: 900px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .aside-left {
        width: 175px;
        height: 234px;
        background-color: #fff;
        position: absolute;
        left: 105px;
        top: 185px;
    }

    .aside-left ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        padding-top: 10px;
    }

    .aside-left ul li {
        width: 160px;
        height: 34px;
        margin: 0 auto;
        line-height: 34px;
        color: #2d3436;
        border-bottom: 1px dotted #ccc;
        transition: 0.2s;
        cursor: pointer;
    }

    .aside-left ul li:hover {
        background-color: #ffeaa7;
    }

    .aside-left ul li:hover span {
        color: orange;
    }
    .aside-left ul li:visited{
        color: #ccc;
    }
    .aside-left ul li span {
        display: inline-block;
        width: 25px;
        text-align: center;
        font-size: 20px;
        color: #ccc;
    }

    .content {
        width: 765px;
        min-height: 673px;
        background-color: #fff;
        position: absolute;
        left: 300px;
        top: 170px;
    }

    .aside-middle {
        height: 673px;
        width: 20px;
        position: absolute;
        left: 280px;
        top: 170px;
    }

    .aside-middle-top {
        width: 20px;
        height: 20px;
        border-top-left-radius: 100%;
        background-color: #b2bec3;
    }

    .aside-middle-middle {
        height: 633px;
        width: 20px;
        background-color: #b2bec3;
        position: absolute;
        top: 20px;
    }

    .aside-middle-bottom {
        width: 20px;
        height: 20px;
        border-bottom-left-radius: 100%;
        background-color: #b2bec3;
        position: absolute;
        bottom: 0;
    }
    .iframeBox{
        width: 100%;
        height: 669px;
        box-sizing: border-box;
        border: 0;
    }
</style>
<body>
<!--背景图片-->
<div class="bgImage">
    <img src="/images/person/home_night_bg.jpg">
</div>

<!--这里是头部，留着了-->
<div class="header"></div>

<!--主体部分-->
<div class="container">
    <div class="nav">
        <!--<img src="../images/word_03.png">-->
        <img src="/images/person/img-word_06.png">
    </div>
    <div class="aside-left">
        <ul>
            <li><span class="fa fa-home"></span><a href="/personCenter" target="right">个人中心</a></li>
            <li><span class="fa fa-list-ul"></span><a href="/myBookcase" target="right">我的书架</a></li>
            <li><span class="fa fa-shopping-basket"></span><a href="/alreadyBuy" target="right">我购买的作品</a></li>
            <li><span class="fa fa-file-text"></span><a href="/votingRecord" target="right">投票纪录</a></li>
			<li><span class="fa fa-file-text"></span><a href="/paySet" target="right">修改个人信息</a></li>
            <li><span class="fa fa-question-circle-o"></span><a href="#">FAQ</a></li>
        </ul>
    </div>
    <div class="aside-middle">
        <div class="aside-middle-top"></div>
        <div class="aside-middle-middle"></div>
        <div class="aside-middle-bottom"></div>
    </div>
    <div class="content">
        <iframe src="http://localhost:9999/personCenter" class="iframeBox" name="right" scrolling="no"></iframe>
    </div>
</div>


<script>
    //按钮的样式处理
for(let li of document.getElementsByTagName('li')){
    li.addEventListener('click',function(e){
        if(e.target && e.target.nodeName.toLowerCase() == "li"){
            li.children[1].click()
        }
    })
    li.onclick = function(){
        for(let li of document.getElementsByTagName('li')){
            li.style.backgroundColor = '#fff'
            li.children[0].style.color = '#ccc'
        }
        li.style.backgroundColor='#ffeaa7'
        li.children[0].style.color = 'orange'
    }
}

</script>
</body>
</html>